<template>
  <div class="balloon">
    <img :src="baseURl + 'img/dahua_balloon1.65402c55.png'" alt="" />
    <ul class="ballonList">
      <li class="balloon_item">
        <i
          style="
            background-image: url('');
          "
        ></i>
        <span>就业推荐</span>
      </li>
      <li class="balloon_item">
        <i
          style="
            background-image: url('');
          "
        ></i>
        <span>助学贷款</span>
      </li>
      <li class="balloon_item">
        <i
          style="
            background-image: url('');
          "
        ></i>
        <span>免费试听</span>
      </li>
      <li class="balloon_item">
        <i
          style="
            background-image: url('');
          "
        ></i>
        <span>在线咨询</span>
      </li>
      <li class="backTop" @click="backTop">
        <i
          style="
            background-image: url('');
          "
        ></i>
        <span>TOP</span>
        <i
          style="
            background-image: url('');
          "
        ></i>
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
.balloon {
  position: fixed;
  left: 30px;
  bottom: 100px;
  width: 120px;
  height: 422px;
  z-index: 999;
  .ballonList {
    width: 119px;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 270px;
    .balloon_item {
      margin: 0 auto;
      width: 80%;
      height: 30px;
      cursor: pointer;
      color: #fff;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      i {
        width: 20px;
        height: 20px;
      }
    }
    .backTop {
      margin: 0 auto;
      width: 80%;
      height: 30px;
      cursor: pointer;
      color: #fff;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      i {
        width: 7px;
        height: 12px;
      }
    }
  }
}
</style>
<script>
export default {
  data() {
    return {
      baseURl: "https://itdahua.com/",
    };
  },
  methods: {
    backTop() {
          var timer = setInterval(function(){
            let osTop = document.documentElement.scrollTop || document.body.scrollTop;
            let ispeed = Math.floor(-osTop / 5); 
            document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
            this.isTop = true;
            if(osTop === 0){
              clearInterval(timer);
            }
          },30)
    },
  },
};
</script>